<template>
	<view>
		<view class="banner">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
				<swiper-item class="sp" v-for="(item,index) in list.skuList" :key="index">
					<image :src="item.pic" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>
			<view class="collect">
				<uni-icons type="star" :color="isCollected ? 'red' : 'white'" size="30" @tap="collected"></uni-icons>
			</view>
		</view>
		<view class="info">
			<view class="price">
				<view class="p1">
					<view class="left">
						￥
					</view>
					<view class="center">
						{{list.promotionPrice}}
					</view>
					<view class="right">
						.00
					</view>
				</view>
				<view class="p2">
					￥{{list.price}}.00
				</view>
				<view class="p3">
					没有促销使用原价
				</view>
			</view>
			<view class="title">
				{{list.name}}
			</view>
			<view class="text">
				{{list.description}}
			</view>
			<view class="v-html">
				<mp-html :tag-style="tagStyle" :content="list.detailMobileHtml" />
			</view>
		</view>
		<view class="footer">
			<view class="kf">
				<image src="/static/icons/kf.png" mode=""></image>
			</view>
			<view class="box">
				<view class="cart" @tap="maskUp(0)">
					添加到购物车
				</view>
				<view class="buy" @tap="maskUp(1)">
					立即购买
				</view>
			</view>
		</view>

		<uni-transition :show="maskShow" :modeClass="classStyle">
			<view class="mask" @touchmove.stop.prevent="stopMove()" @tap="maskShow=!maskShow">
				<view class="main" @tap.stop="zzz(11)">
					<image v-if="list.skuList" :src="list.skuList[index].pic" mode=""></image>
					<view class="close" @tap="maskShow=!maskShow">
						<image src="../../static/icons/x.png" mode=""></image>
					</view>
					<view class="top">
						<view class="left">
							<view class="title">
								{{list.name}}
							</view>
							<view v-if="list.skuList" class="stock">
								库存数量:{{list.skuList[index].stock}}
							</view>
						</view>

					</view>
					<view class="center">
						<view class="select fw">
							<view class="title">
								商品选择
							</view>
							<view class="box" :class="{act:index == current}" @tap="qh(index)" v-for="(item,index) in list.skuList" :key="item.id">
								<view class="kind" v-for="item1 in item.spData" :key="item.value">
									<view class="text1">{{item1.key}}:{{item1.value}}</view>
								</view>
							</view>
						</view>

						<view class="fw">
							<view class="title">
								特色服务
							</view>
							<view class="box">
								<view class="text">
									送货上门
								</view>
								<view class="text">
									上门安装
								</view>
							</view>
						</view>

						<view class="num fw">
							<view class="title">
								购买数量
							</view>
							<view class="btn">
								<view class="cut" @tap="num(0)">
									-
								</view>
								<view class="number">
									{{buyNum}}
								</view>
								<view class="add" @tap="num(1)">
									+
								</view>
							</view>

						</view>
						<!-- <view > -->
						<view class="ok" @tap="tijiao()">
							确定
						</view>
						<!-- </view> -->

					</view>


				</view>
			</view>
		</uni-transition>


	</view>
</template>

<script>
	import {
		productDetail,
		addCart,
		addPreOrder
	} from "../../api/Detail/index.js"
	import mix from "@/pages/mixins/mixins.js"
	export default {
		data() {
			return {
				current: 0,
				classStyle: ["fade"],
				id: 0,
				list: {},
				index: 0,
				// skuList:[],
				maskShow: false,
				isCollected: false,
				cart: true,
				buyNum: 1,
				tagStyle: {

				},


			}
		},
		onLoad: function(option) {
			this.id = option.id;
			this.getInfo(this.id);

		},
		mixins: [mix],
		methods: {
			zzz(val) {
				// console.log(val)
			},
			getInfo(val) {
				productDetail(val).then(res => {
					// console.log(res);
					var goods = uni.getStorageSync("goods");
					if (goods.length == 0) {
						this.isCollected = false
					} else {
						var item = goods.find(ele => ele.id == res.data.product.id)
						if (item) {
							this.isCollected = true
						} else {
							this.isCollected = false
						}
					}
					res.data.product.skuList.forEach(ele => {
						ele.spData = JSON.parse(ele.spData)
					})
					this.list = res.data.product;
					// this.skuList = res.data.product.skuList;
					console.log(this.list);
					uni.setNavigationBarTitle({
						title: res.data.product.name
					})
				})
			},


			collected() {
				if (this.checkLogins()) {
					var goods = uni.getStorageSync("goods");
					if (goods == undefined || goods == "") {
						goods = [];
					}
					if (this.isCollected == true) {
						//取消收藏
						//先判断本地是否存在
						var item = goods.find(ele => ele.id == this.list.id);
						var index = goods.findIndex(ele => ele.id == this.list.id);
						if (item) {
							//如果存在--移除
							goods.splice(index, 1)
						} else {
							goods.push(this.list)
						}
					} else {
						goods.push(this.list)
					}

					this.isCollected = !this.isCollected;
					uni.setStorageSync("goods", goods)
				}

			},
			maskUp(val) {
				if (this.checkLogins()) {
					this.maskShow = true;
					console.log(val)
					if (val == 0) {
						//购物车
						this.cart = true;
					} else {
						this.cart = false;
						//购买
					}
				}


			},
			stopMove() {

			},
			num(val) {
				if (val == 0) {
					if (this.buyNum <= 1) {

					} else {
						this.buyNum--
					}
				} else {
					this.buyNum++
				}
			},
			tijiao() {
				console.log(this.cart)
				if (this.cart) {
					//添加购物车
					addCart({
						productId: this.list.skuList[this.index].productId,
						productSkuId: this.list.skuList[this.index].id,
						quantity: this.buyNum,
					}).then(res => {
						console.log(res)
						uni.showToast({
						    title: '添加成功',
						    duration: 2000
						});
					})
				} else {
					//购买
					addPreOrder({
						orderItemList: [{
							productId: this.list.skuList[this.index].productId,
							productSkuId: this.list.skuList[this.index].id,
							productQuantity: this.buyNum,
						}]

					}).then(res => {
						console.log(res)
						var orderId = res.data.orderId;
						uni.navigateTo({
							
							url:`/pages/Detail/confirmOrder/confirmOrder?id=${orderId}`
							
						})
					})

				}
				// console.log(this.cart)
				this.maskShow = !this.maskShow;

			},
			qh(val) {
				// console.log(val);
				this.index = this.current = val
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './css/index.scss'
</style>
